<script lang="ts" setup>
import BaseButton from "@/components/BaseButton/index.vue";
import BaseUpDown from "@/components/BaseUpDown/index.vue";
import useSearch from "@/hooks/useSearch";
import useData from "./hooks/useData";
import { useUserStore } from "@/stores/modules/user";

const { pageData, roleMap } = useData();
import { getDataByPage, editData } from "@/api/modules/resource/service";
import UpdateForm from "./components/UpdateForm/index.vue";
import UpdateFormService from "./components/UpdateFormService/index.vue";

interface Props {
  title?: string;
  defaultSelect?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "选择指纹样例",
  defaultSelect: "",
  rowData: undefined
});
const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const { tableData, loadData, formData, reloadData } = useSearch({
  defaultData: {},
  responseKey: {
    list: "result.data",
    total: "result.total"
  }
});

function loadDataCb() {
  loadData({
    api: getDataByPage,
    sendData: {
      pageNum: formData.pageNum - 1,
      pageSize: formData.pageSize
    }
  });
  setTimeout(() => {
    getData();
  }, 1000);
}

onMounted(async () => {
  await loadDataCb();
  setTimeout(() => {
    console.log("props.defaultSelect", props.defaultSelect);
    if (!props.defaultSelect) return;
    let data = props.defaultSelect.split(";");
    data = data.map(item => {
      let text = item;
      if (item.includes(":")) {
        text = item.split(":")[0].trim();
      }
      return text;
    });
    console.log(data);
    data.forEach(item => {
      const index = list.value.findIndex(val => val.name.trim() === item.trim());
      console.log("index", index);
      if (index > -1) {
        list.value[index].isCheck = true;
      }
    });
    emits(
      "select",
      list.value.filter(item => item.isCheck)
    );
  }, 1500);
});

function reloadDataCb() {
  reloadData();
  loadData({
    api: getDataByPage,
    sendData: {
      pageNum: formData.pageNum - 1,
      pageSize: formData.pageSize
    }
  });
}

loadDataCb();

import { computed, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const list = ref([]);
const webData = ref();

function getData() {
  console.log(tableData);
  let arr: any = [];
  tableData.list.forEach(item => {
    if (item[0] != 5) {
      let obj = JSON.parse(item[5]);
      let account = "-";
      let password = "-";
      console.log(obj);
      if (obj?.account) {
        account = obj.account[0]?.user;
        password = obj.account[0]?.password;
      }
      if (obj.srvid == 10) {
        password = obj.requirepass;
      }
      arr.push({
        id: item[item.length - 1].replace("/", ""),
        name: item[1],
        proto: item[2],
        port: item[3],
        grade: item[4],
        account,
        password,
        originData: item,
        srvid: obj.srvid,
        isCheck: false
      });
    }
    if (item[0] == 5) {
      let webArr = JSON.parse(item[5]);
      console.log("web==", webArr);
      webData.value = webArr;
      webArr.app.forEach(val => {
        let priMap = new Map([
          ["1", "低"],
          ["2", "中"],
          ["3", "高"]
        ]);
        arr.push({
          id: val.id,
          name: val.name,
          proto: val.proto,
          port: val.port,
          grade: priMap.get(val.pri.toString()),
          account: "root",
          password: "123456",
          originData: item,
          type: val.type.toString(),
          srvid: webArr.srvid,
          file: val.file,
          isCheck: false
        });
      });
    }
  });
  list.value = arr;
  console.log("  list.value ::", list.value);
}

async function deleteData(item) {
  await ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "danger"
  });
  let arr = item.originData[5];
  arr = JSON.parse(arr);
  arr.app = arr.app.filter(val => val.id != item.id);
  let sendData = {
    id: "5",
    text: arr
  };
  await editData(sendData);
  ElMessage.success("操作成功");
  loadDataCb();
}

const emits = defineEmits(["select"]);

function select(index) {
  list.value[index].isCheck = !list.value[index].isCheck;
  emits(
    "select",
    list.value.filter(item => item.isCheck)
  );
}

function selectAll() {
  list.value = list.value.map(item => {
    return {
      ...item,
      isCheck: true
    };
  });
  emits(
    "select",
    list.value.filter(item => item.isCheck)
  );
}

function cancelSelectAll() {
  list.value = list.value.map(item => {
    return {
      ...item,
      isCheck: false
    };
  });
  emits(
    "select",
    list.value.filter(item => item.isCheck)
  );
}
</script>

<template>
  <div class="content">
    <div class="h-box justify-end mg-b-sm mg-r-sm">
      <el-button @click="selectAll" type="primary">全选</el-button>
      <el-button class="mg-r-sm" @click="cancelSelectAll">取消选中</el-button>
    </div>
    <el-row :gutter="20" class="pad-base" style="max-height: calc(100vh - 260px); overflow: scroll;overflow-x: hidden">
      <el-col
        @click="select(index)"
        v-for="(item, index) in list"
        :key="item.id"
        class="mg-b-sm cursor-pointer"
        :lg="6"
        :sm="6"
        :xs="6"
      >
        <el-card>
          <template #header>
            <div class="card-header h-box" style="justify-content: space-between">
              <span>{{ item.name }}</span>
              <div style="font-size: 14px" class="h-box">
                <span>{{ item.proto }}</span>
              </div>
              <el-checkbox v-model="item.isCheck"></el-checkbox>
            </div>
          </template>
          <div class="content h-box" style="font-size: 14px; flex-wrap: wrap">
            <div style="width: 50%" class="mg-b-sm">
              <span>端口:</span>
              <span>{{ item.port }}</span>
            </div>
            <div class="mg-b-sm">
              <span>危险等级:</span>
              <span>{{ item.grade }}</span>
            </div>
            <div style="width: 50%">
              <span>用户名:</span>
              <span>{{ item.account }}</span>
            </div>
            <div>
              <span>密码:</span>
              <span>{{ item.password }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped lang="scss">

</style>
